<template>
  <div class="layout">
    <el-form ref="formRef" :model="form" label-width="80px" :inline="true" class="searchForm2">
      <el-form-item label="时间筛选" class="selectTime">
        <div class="selectTime_btn">
          <el-button :plain="form.currentId == '1'" @click="selectTime('1')">昨天</el-button>
          <el-button :plain="form.currentId == '2'" @click="selectTime('2')">最近7天</el-button>
          <el-button :plain="form.currentId == '3'" @click="selectTime('3')">最近30天</el-button>
          <el-button :plain="form.currentId == '4'" @click="selectTime('4')">自定义时间</el-button>
        </div>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="form.time" :disabled-date="disabledDate" @change="changeDate" range-separator="-" type="daterange" style="width: 360px" value-format="YYYY-MM-DD" format="YYYY-MM-DD" start-placeholder="开始时间" end-placeholder="结束时间" />
      </el-form-item>
      <el-form-item label="选择成员">
        <el-select class="form_item_input" popper-class="zw-hide_select_option" v-model="form.work_user" placeholder="全部成员" multiple @click="openDepart" @change="changeDepart">
          <el-option v-for="item in creators" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="submitForm">查询</el-button>
        <el-button @click="resetForm">清空</el-button>
      </el-form-item>
    </el-form>
    <!-- 部门人员弹框 -->
    <ZWDepart ref="DepartRef" @submit="getDepart" />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, watch, onMounted } from 'vue'
  import type { ElForm } from 'element-plus'
  import ZWDepart from '@/components/ZWDepart.vue'
  import { getDay, getSetionId, DFormat, IsNotEmpty } from '@/utils/utils'
  type FormInstance = InstanceType<typeof ElForm>
  import { useRoute } from 'vue-router'
  const route = useRoute()
  const DepartRef = ref(null)
  const creators = ref([])
  const props = defineProps(['defaultTime'])
  const emit = defineEmits({
    submit: null
  })
  const formRef = ref<FormInstance>()
  const startTime = ref(0)
  const EndTime = ref(0)
  //禁用时间
  const disabledDate = (time) => {
    return time.getTime() < startTime.value || time.getTime() > EndTime.value
  }
  watch(
    () => props.defaultTime,
    (val) => {
      if (IsNotEmpty(val)) {
        startTime.value = new Date(val[0]).getTime()
        EndTime.value = new Date(val[1]).getTime()
      }
    },
    { immediate: true }
  )
  const changeDate = (val?: Array<string>) => {
    form.time = [val[0] + ' 00:00:00', val[1] + ' 23:59:59']
  }

  //打开新建选择人
  const openDepart = () => {
    DepartRef.value.appDialog.title = '选择员工'
    DepartRef.value.departVisble = true
    DepartRef.value.isMember = true // 可以选择部门
    DepartRef.value.selectedMember = creators.value
  }
  // 获取部门成员
  const getDepart = (res: any) => {
    creators.value = res
    form.work_user = getSetionId('id', creators.value)
  }
  // 删除部门成员
  const changeDepart = (data: any) => {
    let removeDepart = creators.value.find((item: any) => !data.includes(item.id))
    let arr: any[] = creators.value.filter((item: any) => data.includes(item.id))
    form.work_user = getSetionId('id', arr)
    creators.value = arr
    DepartRef.value.removeItem(removeDepart)
  }
  // 收集的表单数据
  const form = reactive({
    task_id: +route.query?.id,
    work_user: [],
    currentId: '2',
    time: [getDay(-6), getDay(0, true)]
  })
  // 选择最近时间
  const selectTime = (val: number) => {
    form.currentId = val
    switch (form.currentId) {
      case '1':
        form.time = [getDay(-1), getDay(-1, true)]
        break
      case '2':
        form.time = [getDay(-6), getDay(0, true)]
        break
      case '3':
        form.time = [getDay(-29), getDay(0, true)]
        break
    }
    emit('submit', form)
  }
  // 提交查询
  const submitForm = () => {
    emit('submit', form)
  }
  //重置
  const resetForm = () => {
    form.work_user = []
    form.time = [getDay(-6), getDay(0, true)]
    form.currentId = '2'
    submitForm()
  }
  onMounted(() => {
    resetForm()
  })
</script>
<style lang="scss" scoped>
  .layout {
    margin-top: 15px;
    width: 100%;
    .top {
      display: flex;
      &_btn {
        padding: 10px 21px;
        background: #ffffff;
        border: 1px solid #ff6b00;
        font-size: 16px;
        color: #ff6b00;
        line-height: 16px;
        cursor: pointer;
      }
      .active {
        background: #ff6b00;
        color: #ffff;
      }
    }
    padding: 0 20px 0 0;
    position: relative;
    // height: 136px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .searchForm2 {
      background: #fff;
      position: relative;
      border: 1px solid #eaeaea;
      padding: 18px 0px 0px;
      :deep(.el-form-item) {
        margin-bottom: 16px;
      }
      .form_item_input {
        .el-input__inner {
          width: 100px;
        }
      }
      .filter_time {
        margin-left: 15px;
        display: inline-flex;
        .text-center {
          margin: 0 5px;
          color: #969696;
        }
        .picker_time {
          :deep .el-input__prefix {
            display: none;
          }
          :deep .el-input__inner {
            width: 150px;
            box-sizing: border-box;
            padding: 0 0 0 12px;
          }
        }
      }
      .selectTime {
        padding-left: 10px;
        .selectTime_btn {
          display: flex;
          align-items: center;
          &_item {
            padding: 0 18px;
            margin-right: 16px;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #eaeaea;
            cursor: pointer;
          }
          .active {
            border: 1px solid #ff6b00;
            color: #ff6b00;
          }
        }
      }
      .search_btn {
        position: absolute;
        top: 5px;
        right: 0;
      }
    }
    .text {
      font-size: 14px;
      color: #848484;
      line-height: 14px;
      text-align: right;
      margin-bottom: 10px;
    }
  }
</style>
